<template>
    <a-layout :theme="dark" class="layout-demo">
        <a-layout>
            <a-layout-content>
                <slot> <router-view /></slot>
            </a-layout-content>

            <!-- 侧边栏 -->
            <a-layout-sider hide-trigger collapsible :collapsed="collapsed" :reverse-arrow="true" :width="350">

                <a-button shape="round" @click="onCollapse">
                    <IconCaretLeft v-if="collapsed" />
                    <IconCaretRight v-else />
                </a-button>
                <slot>
                    <!-- 侧边栏里的Info组件 -->
                    <SiderMenuInfo />
                </slot>
            </a-layout-sider>

            <!-- <a-layout-footer>Footer</a-layout-footer> -->
        </a-layout>



    </a-layout>
</template>
<script>
import { defineComponent, ref } from 'vue';
import SiderMenuInfo from './SiderMenuInfo.vue';
import { Message } from '@arco-design/web-vue';
import {
    IconCaretRight,
    IconCaretLeft,
} from '@arco-design/web-vue/es/icon';

export default defineComponent({
    components: {
        IconCaretRight,
        IconCaretLeft,
        SiderMenuInfo,
    },
    setup() {
        const collapsed = ref(true);
        const onCollapse = () => {
            collapsed.value = !collapsed.value;
        };
        return {
            collapsed,
            onCollapse,
            onClickMenuItem(key) {
                Message.info({ content: `You select ${key}`, showIcon: true });
            }
        };
    },
});
</script>
<style scoped>
.layout-demo {
    height: 1032px;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
}

.layout-demo :deep(.arco-layout-sider) .logo {
    height: 32px;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.2);
}

.layout-demo :deep(.arco-layout-sider-light) .logo {
    background: var(--color-fill-2);
}

.layout-demo :deep(.arco-layout-header) {
    height: 64px;
    line-height: 64px;
    background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer) {
    height: 48px;
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    line-height: 48px;
}

.layout-demo :deep(.arco-layout-content) {
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    color: var(--color-white);
    font-size: 16px;
    font-stretch: condensed;
}
</style>
  